<template>
	<view>
		<view class="add-bank bg-white">
			<view class="black md flex row-between">
				<view>提现银行：</view>
				<input type="text" v-model="form.name" placeholder="请填写银行名称，如中国银行" />
			</view>
			<view class="black md flex row-between">
				<view>银行支行：</view>
				<input type="text" v-model="form.branch" placeholder="请填写银行支行，如北京路支行" />
			</view>
			<view class="black md flex row-between">
				<view>开户姓名：</view>
				<input type="text" v-model="form.nickname" placeholder="请填写开户人姓名，如张三" />
			</view>
			<view class="black md flex row-between">
				<view>银行账号：</view>
				<input type="text" v-model="form.account" placeholder="请填写银行卡账号" />
			</view>
		</view>

		<template v-if="type == 1">
			<view class="btn flex row-center br60 md white" @click="addBankFunc">
				确认添加
			</view>
		</template>

		<template v-if="type == 2">
			<view class="btn flex row-center br60 md white" @click="editBankFunc">
				确认编辑
			</view>
		</template>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		apiAddBank,
		apiEditBank,
		apigetBankDetail
	} from "@/api/user.js"
	import {
		bankCardValid
	} from "@/utils/verify.js"
	export default {
		data() {
			return {
				type: 1, //type1 = 添加 2=编辑
				form: {
					name: '',
					branch: '',
					account: '',
					nickname: ''
				}
			}
		},

		onLoad() {
			try {
				const id = this.$Route.query.id;
				if (id) {
					this.getBankFunc(id)
					this.type = 2
				}
			} catch (e) {
				console.log(e)
			}
		},

		methods: {
			verify() {
				if (!bankCardValid(this.form.account)) {
					this.$refs.uToast.show({
						title: '请输入正确的银行卡号',
						type: 'none'
					})
					return false
				}
				return true
			},
			async addBankFunc() {
				if (!this.verify()) return
				const res = await apiAddBank({
					...this.form
				})
				this.$refs.uToast.show({
					title: '添加成功',
					type: 'success'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			},

			async editBankFunc() {
				if (!this.verify()) return
				const res = await apiEditBank({
					...this.form
				})
				this.$refs.uToast.show({
					title: '修改成功',
					type: 'success'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			},

			async getBankFunc(id) {
				uni.showLoading({
					title:"正在获取银行卡信息"
				})
				const res = await apigetBankDetail({
					id: id
				})
				uni.hideLoading()
				for (const key in res) {
					console.log(res[key])
					this.$set(this.form, key, res[key])
				}
			}
		}
	}
</script>

<style lang="scss">
	.add-bank {
		padding: 0 30rpx;

		input {
			flex: 1;
			margin: 30rpx 0;
			text-align: right;
		}
	}

	.btn {
		width: 690rpx;
		height: 88rpx;
		margin: 0 30rpx;
		margin-top: 40rpx;
		box-sizing: border-box;
		background-color: $-color-primary;
	}
</style>